<template>
  <el-row :gutter="20">
    <el-col :span="6">
      <el-card>
        <el-form
          :rules="rules"
          :inline="true"
          ref="conncectFormRef"
          :model="connectForm"
          class="form-contain"
          size="small"
        >
          <el-form-item :label="t('robo.port')" prop="port">
            <el-input
              type="number"
              v-model.number="connectForm.port"
              :disabled="roboServerStatus"
              placeholder="连接端口"
              @keyup.enter="connect(conncectFormRef)"
            />
          </el-form-item>
          <el-form-item>
            <el-button
              :type="roboServerStatus ? 'danger' : 'primary'"
              @click="connect(conncectFormRef)"
              :loading="loading"
            >
              {{ t(roboServerStatus ? 'robo.disconnect' : 'robo.creat') }}
            </el-button>
          </el-form-item>
        </el-form>

        <!-- 根据消息类型展示不同的表单 -->
        <el-form
          ref="ruleFormRef"
          :model="roboForm"
          :rules="rules"
          :inline="true"
          class="demo-ruleForm"
          label-position="left"
          size="small"
        >
          <el-form-item :label="t('robo.handShake')" prop="handShake">
            <el-input
              type="number"
              :rows="18"
              :placeholder="t('robo.handShake')"
              v-model="roboForm.handShake"
            />
          </el-form-item>

          <el-form-item :label="t('robo.srmNo')" prop="srmNo">
            <el-input
              type="number"
              :rows="18"
              :placeholder="t('robo.srmNo')"
              v-model="roboForm.srmNo"
            />
          </el-form-item>

          <el-form-item :label="t('robo.mode')" prop="mode">
            <el-input
              type="number"
              :rows="18"
              :placeholder="t('robo.mode')"
              v-model="roboForm.mode"
            />
          </el-form-item>

          <el-form-item :label="t('robo.alarm')" prop="alarm">
            <el-input
              type="number"
              :rows="18"
              :placeholder="t('robo.alarm')"
              v-model="roboForm.alarm"
            />
          </el-form-item>

          <el-form-item :label="t('robo.liftFull')" prop="liftFull">
            <el-input
              type="number"
              :rows="18"
              :placeholder="t('robo.liftFull')"
              v-model="roboForm.liftFull"
            />
          </el-form-item>

          <el-form-item :label="t('robo.posX')" prop="posX">
            <el-input
              type="number"
              :rows="18"
              :placeholder="t('robo.posX')"
              v-model="roboForm.posX"
            />
          </el-form-item>

          <el-form-item :label="t('robo.posY')" prop="posY">
            <el-input
              type="number"
              :rows="18"
              :placeholder="t('robo.posY')"
              v-model="roboForm.posY"
            />
          </el-form-item>

          <el-form-item :label="t('robo.posZ')" prop="posZ">
            <el-input
              type="number"
              :rows="18"
              :placeholder="t('robo.posZ')"
              v-model="roboForm.posZ"
            />
          </el-form-item>

          <el-form-item :label="t('robo.posXmm')" prop="posXmm">
            <el-input
              type="number"
              :rows="18"
              :placeholder="t('robo.posXmm')"
              v-model="roboForm.posXmm"
            />
          </el-form-item>

          <el-form-item :label="t('robo.posYmm')" prop="posYmm">
            <el-input
              type="number"
              :rows="18"
              :placeholder="t('robo.posYmm')"
              v-model="roboForm.posYmm"
            />
          </el-form-item>

          <el-form-item :label="t('robo.posZmm')" prop="posZmm">
            <el-input
              type="number"
              :rows="18"
              :placeholder="t('robo.posZmm')"
              v-model="roboForm.posZmm"
            />
          </el-form-item>

          <el-form-item :label="t('robo.pickFinish')" prop="pickFinish">
            <el-input
              type="number"
              :rows="18"
              :placeholder="t('robo.pickFinish')"
              v-model="roboForm.pickFinish"
            />
          </el-form-item>

          <el-form-item :label="t('robo.deliveryFinish')" prop="deliveryFinish">
            <el-input
              type="number"
              :rows="18"
              :placeholder="t('robo.deliveryFinish')"
              v-model="roboForm.deliveryFinish"
            />
          </el-form-item>

          <el-form-item :label="t('robo.taskFinish')" prop="taskFinish">
            <el-input
              type="number"
              :rows="18"
              :placeholder="t('robo.taskFinish')"
              v-model="roboForm.taskFinish"
            />
          </el-form-item>

          <el-form-item :label="t('robo.falutCode')" prop="falutCode">
            <el-input
              type="number"
              :rows="18"
              :placeholder="t('robo.falutCode')"
              v-model="roboForm.falutCode"
            />
          </el-form-item>

          <el-form-item :label="t('robo.state')" prop="state">
            <el-input
              type="number"
              :rows="18"
              :placeholder="t('robo.state')"
              v-model="roboForm.state"
            />
          </el-form-item>

          <el-form-item :label="t('robo.actualLane')" prop="actualLane">
            <el-input
              type="number"
              :rows="18"
              :placeholder="t('robo.actualLane')"
              v-model="roboForm.actualLane"
            />
          </el-form-item>

          <el-form-item :label="t('robo.taskNo')" prop="taskNo">
            <el-input
              type="number"
              :rows="18"
              :placeholder="t('robo.taskNo')"
              v-model="roboForm.taskNo"
            />
          </el-form-item>

          <el-form-item :label="t('robo.ack')" prop="ack">
            <el-input
              type="number"
              :rows="18"
              :placeholder="t('robo.ack')"
              v-model="roboForm.ack"
            />
          </el-form-item>

          <el-form-item>
            <el-button
              type="primary"
              @click="submitForm(ruleFormRef)"
              :disabled="!roboServerStatus"
              :loading="loading"
            >
              {{ t('robo.send') }}
            </el-button>
            <el-button @click="resetForm(ruleFormRef)">
              {{ t('robo.reset') }}
            </el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </el-col>
    <el-col :span="18">
      <Log />
    </el-col>
  </el-row>
</template>

<script lang="ts" setup>
import {
  ElMessage,
  FormInstance,
  FormRules,
  TabsPaneContext,
} from 'element-plus'
import { onMounted, reactive, ref } from 'vue'
import Log from '@/components/Log/roboLog.vue'
import { closeServer, creatServer, sendMessageByServer } from '@/api/robo'
import { useI18n } from 'vue-i18n'
import { roboStore } from '@/store/roboStore'
import { storeToRefs } from 'pinia'

const { t } = useI18n()

const store = roboStore()
const ruleFormRef = ref<FormInstance>()
const loading = ref(false)

// // 初始化websocket
// initWebSocket('simulator')
const { roboServerStatus, roboServerPort } = storeToRefs(store) // 连接状态

// 连接信息表单
const connectForm = reactive({
  port: roboServerPort.value,
})

const roboForm = reactive({
  /**
   * WCS 与SRM 握手信号,WCS 发
   * 送的脉冲信号,频率为 1HZ
   */
  handShake: 0,

  /**
   * SRM 编号
   */
  srmNo: 0,

  /**
   * =1 自动模式
   * =2 手动模式
   * =3 半自动模式
   * =4 维修模式
   * =0 关机模式
   */
  mode: 0,

  /**
   * =1 SRM 处于报警状态
   */
  alarm: 0,

  /**
   * =1 载货台有货
   */
  liftFull: 0,

  /**
   * SRM 当前列号
   */
  posX: 0,

  /**
   * SRM 当前层号
   */
  posY: 0,

  /**
   * SRM 当前货叉位置
   * =0 货叉原位
   * =1 货叉在左侧
   * =2 货叉在右侧
   */
  posZ: 0,

  /**
   * SRM 当前列坐标,单位 mm
   */
  posXmm: 0,

  /**
   * SRM 当前层坐标,单位 mm
   */
  posYmm: 0,

  /**
   * SRM 当前货叉坐标,单位 mm
   */
  posZmm: 0,

  /**
   * =1 SRM 完成取货信号
   */
  pickFinish: 0,

  /**
   * =1 SRM 完成放货信号
   */
  deliveryFinish: 0,

  /**
   * =1 SRM 任务完成
   */
  taskFinish: 0,

  /**
   * 经HMI人工确认后，PLC发给WCS报警编号：
   * 1、	空取；
   * 2、	满入
   * 3、	取货堵塞
   * 4、	放货堵塞
   * 5、	高度与目标货位不符
   */
  falutCode: 0,

  /**
   * SRM 当前任务执行状态
   * 1=空闲
   * 2=取货定位
   * 3=取货中
   * 4=放货定位中
   * 5=放货中
   * 6=移动定位中
   * 7=空闲且载货台有货
   * 98=任务完成待 WCS 确认
   * 99=报警
   */
  state: 0,

  /**
   * 当前巷道
   */
  actualLane: 0,

  /**
   * 当前任务号
   */
  taskNo: 0,

  /**
   * WCS 只读位(接受到任务下发
   * STB 后反馈)
   */
  ack: 0,
})

// 表单校验规则
const rules = reactive<FormRules>({
  ip: [{ required: true, message: '请填写IP地址', trigger: 'blur' }],
  port: [
    {
      required: true,
      message: '请填写连接端口',
      trigger: 'change',
    },
    { type: 'number', message: '端口号必须为数字类型' },
  ],
  message: [
    {
      required: true,
      message: '请填写报文',
      trigger: 'change',
    },
  ],
})

// 连接
const conncectFormRef = ref<FormInstance>()
const connect = async (formEl: FormInstance | undefined) => {
  // 储存ip和port，解决刷新丢失
  store.setRoboServerPort(connectForm.port)

  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      loading.value = true
      if (roboServerStatus.value) {
        // 断开连接
        closeServer()
          .then((res) => {
            store.setRoboServerStatus(false)
          })
          .finally(() => {
            loading.value = false
          })
      } else {
        // 建立连接
        creatServer(connectForm.port)
          .then((res) => {
            store.setRoboServerStatus(true)
          })
          .finally(() => {
            loading.value = false
          })
      }
    }
  })
}

// 发送消息
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      loading.value = true
      sendMessageByServer(roboForm)
        .then((res) => {
          ElMessage({
            showClose: true,
            message: res.data.message,
            type: 'success',
            duration: 1000,
          })
        })
        .finally(() => {
          loading.value = false
        })
    }
  })
}

// 重置消息表单
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}
</script>
<style scoped lang="scss">
.form-contain {
  margin-bottom: 20px;
}
</style>
